<template>
  <div v-if="show" class="export-settings flex flex-s">
    <form
      ref="form"
      class="inner flex flex-col gr-8 slide-in"
      @submit="confirm"
    >
      <div class="head flex justify-between">
        <div>项目配置</div>
        <div>
          <img
            :src="closePng"
            width="16"
            class="cursor-pointer"
            @click="show = false"
          />
        </div>
      </div>
      <div class="list flex flex-col gr-4">
        <div class="flex flex-col gr-4">
          <div class="text-666"> 导出配置 </div>
          <div class="item">
            <div class="title">导出文件名</div>
            <div>
              <input v-model="data.config.fileName" required type="text" />
            </div>
          </div>
          <div class="flex gc-4 item">
            <div class="title">导出形式</div>
            <div class="flex align-center gc-8">
              <div
                v-for="(item, key) in exportTypeOptions"
                :key="key"
                class="flex align-center gc-2"
              >
                <label :for="item.value" class="text-999">
                  {{ item.label }}
                </label>
                <input
                  :id="item.value"
                  v-model="data.config.exportType"
                  required
                  type="radio"
                  :value="item.value"
                  name="filename"
                />
              </div>
            </div>
          </div>
        </div>

        <div class="flex flex-col gr-4">
          <div class="text-666"> 密码生成 </div>
          <div class="item">
            <div class="title">密码长度</div>
            <div>
              <input
                v-model="data.config.passwordLength"
                type="number"
                required
                :min="0"
                :max="64"
              />
            </div>
          </div>

          <div class="flex gc-4 item">
            <div class="title">密码类型</div>
            <div class="flex align-center gc-8">
              <select v-model="data.config.passwordType" required>
                <option
                  v-for="(item, key) in passwordTypeOptions"
                  :key="key"
                  :value="item.value"
                >
                  {{ item.label }}
                </option>
              </select>
            </div>
          </div>
        </div>
      </div>
      <div class="flex justify-between">
        <div class="secure-button reset" @click="reset">重置</div>
        <button class="secure-button confirm" type="submit"> 确定 </button>
      </div>
    </form>
  </div>
</template>

<script setup lang="ts">
  import closePng from '@/assets/images/close.png';
  import { programData } from '@/store/modules/program/utils';
  import { onMounted, ref } from 'vue';
  import { show } from './bus';
  import { passwordTypeOptions, exportTypeOptions } from './options';
  import { notify } from '../notify/bus';

  const form = ref();
  const data = programData();
  const reset = () => {
    show.value = false;
    notify({
      title: '警告',
      msg: '你将重置所有配置,清空所有记录,且会刷新页面',
      onConfirm() {
        window.localStorage.clear();
        window.location.reload();
      },
    });
  };
  const confirm = () => {
    const event = window.event as Event;
    event.preventDefault();
    const el = form.value as HTMLFormElement;
    if (el.checkValidity()) {
      show.value = false;
    }
  };
</script>

<style lang="scss" scoped>
  @import './style.scss';
</style>
